/* eslint-disable */
<template>
    <div>
        <div class="grap">
            <!-- <input type="text" ref="inputUrl" class="input" placeholder="url"> -->
            <input class="input" v-model="url" ref="input" type="url" autofocus="false">
        </div>
        <div class="group">
            <text class="pickbutton" @click="pickMethod">选择请求方式</text>
        </div>
        <!-- <div >
            <input type="text" ref="inputMethod" class="input" placeholder="method">
        </div> -->
        <div class="group">
            <text class="pickbutton" @click="request">发送fetch请求</text>
        </div>
        <!-- <div class="">
            <text class="button" @click="fecthPost">fecthPost</text>
        </div>
        <div class="">
            <text class="button" @click="fecthPUT">fecthPUT</text>
        </div>
        <div class="">
            <text class="button" @click="fecthHEAD">fecthHEAD</text>
        </div> -->
    </div>
    <!-- <list class="list" @loadmore="fetch" loadmoreoffset="10">
      <cell class="cell" :v-for="num in lists">
        <div class="panel">
          <text class="text">{{num}}</text>
        </div>
      </cell>
    </list> -->
  </template>
<script>
import {fetchRequest} from '../utils/fetch'
const picker = weex.requireModule('picker')
const modal = weex.requireModule('modal')
const LOADMORE_COUNT = 4
export default {
  data () {
    return {
      lists: [1, 2, 3, 4, 5],
      url: 'http://192.168.1.109:8010/web/bar',
      method: 'GET',
      methodArr: ['GET', 'POST', 'HEAD', 'OPTION', 'PUT', 'PATCH', 'DELETE', 'TRACE', 'CONNECT']
    }
  },
  methods: {
    pickMethod () {
      let options = {
        index: 0,
        items: this.methodArr
      }
      picker.pick(
        options
        , event => {
          if (event.result === 'success') {
            this.method = this.methodArr[event.data]
          }
          modal.toast({
            message: this.methodArr[event.data],
            duration: 1
          })
        })
    },
    getUrlvalue () {
      var inputurlElurl = this.$refs.input
      var inputurlVal = inputurlElurl.values
      if (inputurlVal) {
        this.url = inputurlVal
      }
    },
    request () {
      if (!this.url) {
        modal.toast({
          message: 'url不能为空',
          duration: 0.5
        })
        return
      }
      modal.toast({
        message: this.url + ' ' + this.method,
        duration: 0.5
      })
      fetchRequest(this.url, this.method, { answer: 42 }).then((data) => {
        console.log(data)
        modal.toast({
          message: data.status + ' ' + this.url + ' 请求成功',
          duration: 1
        })
      }).catch((res) => {
        modal.toast({
          message: res.status + ' ' + this.url + ' 请求失败',
          duration: 1
        })
      })
    },
    fecthGet () {
      console.log('fetch')
      this.getUrlvalue()
      fetchRequest(this.url, 'GET', { answer: 42 }).then((data) => {
        console.log(data)
        modal.toast({
          message: data.status + ' ' + this.url + ' 请求成功',
          duration: 1
        })
      }).catch((res) => {
        modal.toast({
          message: res.status + ' ' + this.url + ' 请求失败',
          duration: 1
        })
      })
    },
    fecthPost () {
      console.log('fetch')
      fetchRequest('/web/bar', 'POST', { answer: 42 }).then((data) => {
        console.log(data)
        console.log(data)
        modal.toast({
          message: data.status + ' ' + this.url + ' 请求成功',
          duration: 1
        })
      }).catch((res) => {
        modal.toast({
          message: res.status + ' ' + this.url + ' 请求失败',
          duration: 1
        })
      })
    },
    fecthPUT () {
      console.log('fetch')
      fetchRequest('/web/bar', 'PUT', { answer: 42 }).then((data) => {
        console.log(data)
        modal.toast({
          message: data.status + ' 请求成功',
          duration: 1
        })
      }).catch((res) => {
        modal.toast({
          message: res.status + ' ' + this.url + ' 请求失败',
          duration: 1
        })
      })
    },
    fecthHEAD () {
      console.log('fetch')
      fetchRequest('/web/bar', 'HEAD', { answer: 42 }).then((data) => {
        console.log(data)
        modal.toast({
          message: data.status + ' 请求成功',
          duration: 1
        })
      }).catch((res) => {
        modal.toast({
          message: res.status + ' ' + this.url + ' 请求失败',
          duration: 1
        })
      })
    },
    fetch (event) {
      modal.toast({ message: 'loadmore', duration: 1 })
      setTimeout(() => {
        const length = this.lists.length
        for (let i = length; i < length + LOADMORE_COUNT; ++i) {
          this.lists.push(i + 1)
        }
      }, 800)
    }
  }
}
</script>
  <style scoped>
    .panel {
      width: 600px;
      height: 250px;
      margin-left: 75px;
      margin-top: 35px;
      margin-bottom: 35px;
      flex-direction: column;
      justify-content: center;
      border-width: 2px;
      border-style: solid;
      border-color: rgb(162, 217, 192);
      background-color: rgba(162, 217, 192, 0.2);
    }
    .text {
      font-size: 50px;
      text-align: center;
      color: #41B883;
    }
    .group {
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
  }
  .input {
    width: 600px;
    font-size: 36px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: #BBBBBB;
  }
  .button {
      font-size: 60px;
      width: 450px;
      text-align: center;
      margin-top: 30px;
      margin-left: 150px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-width: 2px;
      border-style: solid;
      /* color: #666666; */
      border-color: #DDDDDD;
      background-color: #F5F5F5
    }
    .pickbutton {
      font-size: 36px;
      width: 280px;
      color: #41B883;
      text-align: center;
      padding-top: 25px;
      padding-bottom: 25px;
      border-width: 2px;
      border-style: solid;
      border-color: rgb(162, 217, 192);
      background-color: rgba(162, 217, 192, 0.2);
    }
  </style>
